<template>
  <div id="listenToClass">
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="90px"
        class="demo-ruleForm"
      >
        <el-form-item label="" prop="isAll" class="margin10">
          <el-radio-group v-model="ruleForm.isAll">
            <el-radio
              v-for="item in classList"
              :key="item.dictValue"
              :label="item.dictValue"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="ruleForm.isAll === 'true'">
          <el-form-item
            label="听任意课程"
            prop="stopMinutes"
            class="small"
            label-width="90px"
          >
            <el-input-number
              v-model.number="ruleForm.stopMinutes"
              size="mini"
              :min="1"
              :max="9999"
              :controls="false"
              :step="1"
              step-strictly
            ></el-input-number>
            分钟，
            <el-form-item
              label="奖励"
              prop="getIntegral"
              class="small line margin0"
              label-width="60px"
            >
              <el-input-number
                v-model.number="ruleForm.getIntegral"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-form-item>
          <el-form-item
            label="每日上限"
            prop="everydayMax"
            class="small"
            v-if="ruleForm.isAll === 'true'"
          >
            <el-input-number
              v-model.number="ruleForm.everydayMax"
              size="mini"
              :min="0"
              :max="9999"
              :controls="false"
              :step="1"
              step-strictly
            ></el-input-number>
            次
          </el-form-item>
        </div>
        <el-row :gutter="20" v-if="ruleForm.isAll === 'false'">
          <!--表头-->
          <div class="row-title">
            <el-col :span="6">字段名称</el-col>
            <el-col :span="9">听课时长</el-col>
            <el-col :span="9">积分规则</el-col>
          </div>
          <!--直播课-->
          <el-col :span="6">直播课</el-col>
          <el-col :span="9">
            听课
            <el-form-item
              prop="liveBroad.stopMinutes"
              :rules="rules.stopMinutes"
              label=""
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.liveBroad.stopMinutes"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              分钟
            </el-form-item>
          </el-col>
          <el-col :span="9">
            可获得
            <el-form-item
              label=""
              prop="liveBroad.integralNumber"
              :rules="rules.integralNumber"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.liveBroad.integralNumber"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--录播课-->
          <el-col :span="6">录播课</el-col>
          <el-col :span="9">
            听课
            <el-form-item
              label=""
              prop="recordBroad.stopMinutes"
              :rules="rules.stopMinutes"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.recordBroad.stopMinutes"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              分钟
            </el-form-item>
          </el-col>
          <el-col :span="9">
            可获得
            <el-form-item
              label=""
              prop="recordBroad.integralNumber"
              :rules="rules.integralNumber"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.recordBroad.integralNumber"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
          <!--回放课-->
          <el-col :span="6">回放课</el-col>
          <el-col :span="9">
            听课
            <el-form-item
              label=""
              prop="playBackBroad.stopMinutes"
              :rules="rules.stopMinutes"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.playBackBroad.stopMinutes"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              分钟
            </el-form-item>
          </el-col>
          <el-col :span="9">
            可获得
            <el-form-item
              label=""
              prop="playBackBroad.integralNumber"
              :rules="rules.integralNumber"
              class="small line margin0"
              label-width="8px"
            >
              <el-input-number
                v-model.number="ruleForm.playBackBroad.integralNumber"
                size="mini"
                :min="1"
                :max="9999"
                :controls="false"
                :step="1"
                step-strictly
              ></el-input-number>
              积分
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="每日上限"
          prop="dailyLimit"
          v-if="ruleForm.isAll === 'false'"
        >
          <el-radio-group v-model="ruleForm.dailyLimit">
            <el-radio
              v-for="item in dailyLimitList"
              :key="item.dictValue"
              :label="item.dictValue"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
          <el-form-item
            label=""
            prop="everydayMaxTemp"
            class="small line margin0 limit"
            v-if="ruleForm.dailyLimit === 'limited'"
          >
            <el-input-number
              v-model.number="ruleForm.everydayMaxTemp"
              size="mini"
              :min="1"
              :max="9999"
              :controls="false"
              :step="1"
              step-strictly
            ></el-input-number>
            次
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  name: 'listenToClass',
  msg: '积分策略-听课',
  watch: {
    'ruleForm.everydayMaxTemp': {
      handler(newVal, oldVal) {
        if (newVal === 0) {
          //每日上限(0表示无上限)
          this.ruleForm.dailyLimit = 'unlimited'
        } else {
          this.ruleForm.dailyLimit = 'limited'
        }
      },
      deep: true,
      immediate:true
    },
    'ruleForm.dailyLimit': {
      handler(newVal, oldVal) {
        if (newVal === 'unlimited') {
          //每日上限(0表示无上限)
          this.ruleForm.everydayMaxTemp = 0
        }
      },
      deep: true
    },
    'ruleForm.isAll': {
      handler(newVal, oldVal) {
        if (newVal === 'true') {
          //所有课程
          this.ruleForm.liveBroad.integralNumber = 0
          this.ruleForm.liveBroad.stopMinutes = 0
          this.ruleForm.playBackBroad.integralNumber = 0
          this.ruleForm.playBackBroad.stopMinutes = 0
          this.ruleForm.recordBroad.integralNumber = 0
          this.ruleForm.recordBroad.stopMinutes = 0
          this.ruleForm.everydayMaxTemp = 0
        } else {
          this.ruleForm.everydayMax = 0
          this.ruleForm.getIntegral = 0
          this.ruleForm.stopMinutes = 0
        }
      },
      deep: true
    }
  },
  data() {
    return {
      dailyLimitList: [
        { dictValue: 'unlimited', dictLabel: '不限' },
        { dictValue: 'limited', dictLabel: '限制' }
      ], // 每日上限
      classList: [], // 每日上限
      ruleForm: {
        dailyLimit: 'unlimited', //每日上限（自定义课程）
        isAll: 'true', //不区分平台、按照平台区分设置
        everydayMax: 1, //每日上限（不区分平台）
        everydayMaxTemp: 1, //每日上限（区分平台）
        getIntegral: 10, // 奖励积分
        stopMinutes: 0, // 浏览时间
        liveBroad: {
          integralNumber: 0, //设置奖励积分
          stopMinutes: 0 //设置听课分钟
        }, //直播课
        playBackBroad: {
          integralNumber: 0, //设置奖励积分
          stopMinutes: 0 //设置听课分钟
        }, //回放课
        recordBroad: {
          integralNumber: 0, //设置奖励积分
          stopMinutes: 0 //设置听课分钟
        } //录播课
      },
      rules: {
        dailyLimit: {
          required: true,
          message: '请选择每日上限',
          trigger: 'change'
        },
        everydayMax: {
          required: true,
          message: '每日上限不能为空',
          trigger: 'change',
          type: 'number'
        },
        everydayMaxTemp: {
          required: true,
          message: '每日上限不能为空',
          trigger: 'change',
          type: 'number'
        },
        getIntegral: {
          required: true,
          type: 'number',
          message: '积分不能为空',
          trigger: 'change'
        },
        integralNumber: {
          required: true,
          type: 'number',
          message: '积分不能为空',
          trigger: 'change'
        },
        stopMinutes: {
          required: true,
          type: 'number',
          message: '时长不能为空',
          trigger: 'change'
        }
      }
    }
  },
  mounted() {
    this.getStatusList()
  },
  methods: {
    /* 获取字典状态 */
    async getStatusList() {
      this.classList = await sysNormalDisable('strategy_rules_learn')
      this.ruleForm.isAll = this.classList[0].dictValue
    },
    //表单赋值
    setForm(formData) {
      let {
        isAll,
        everydayMax,
        getIntegral,
        stopMinutes,
        subtaskDTO
      } = formData
      this.ruleForm.isAll = isAll.toString()
      this.ruleForm.getIntegral = getIntegral
      if (isAll === true) {
        //所有课程
        this.ruleForm.everydayMax = everydayMax
        this.ruleForm.getIntegral = getIntegral
        this.ruleForm.stopMinutes = stopMinutes
      } else {
        this.ruleForm.everydayMax = 0
        this.ruleForm.everydayMaxTemp = everydayMax
      }
      if (subtaskDTO && subtaskDTO.length > 0) {
        subtaskDTO.forEach((item) => {
          let [key, integralNumber, stopMinutes] = [
            item.toEdit,
            item.integralNumber,
            item.stopMinutes
          ]
          this.ruleForm[key].integralNumber = integralNumber
          this.ruleForm[key].stopMinutes = stopMinutes
        })
      }
    },
    //表单校验 & 数据提交
    checkForm() {
      let obj = { ...this.ruleForm }
      if (obj.isAll === 'false') {
        obj.everydayMax = obj.everydayMaxTemp
      }
      delete obj.everydayMaxTemp
      delete obj.dailyLimit
      this.$emit('setComRuleForm', obj)
      let _this = this
      return new Promise((resolve, reject) => {
        _this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            resolve(true)
          } else {
            console.log(this.ruleForm)
            reject(false)
          }
        })
      })
    }
  }
}
</script>

<style lang="less">
#listenToClass {
  .el-row {
    padding-bottom: 10px;
    .el-col {
      height: 60px;
      line-height: 40px;
      color: #333;
    }
    .row-title {
      background: #eee;
      height: 40px;
      margin-bottom: 6px;
      .el-col {
        height: 40px;
      }
    }
  }
  .margin10 {
    margin-bottom: 10px !important;
    .el-form-item__content {
      margin-left: 5px !important;
    }
  }
  .margin5 {
    margin-bottom: 8px !important;
  }
  .margin0 {
    margin-bottom: 0px !important;
  }
  .line {
    display: inline-block;
    margin-left: 8px;
  }
  .limit{
    width: 130px;
  }
}
</style>
